<template>
  <div class="order-audit-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <el-icon><Document /></el-icon>
        工单审核
      </h2>
      <p class="page-desc">审核待处理的工单申请</p>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card class="search-card" shadow="never">
        <el-form :model="searchForm" inline>
          <el-form-item label="工单编号">
            <el-input 
              v-model="searchForm.orderNo" 
              placeholder="请输入工单编号"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="申请人">
            <el-input 
              v-model="searchForm.applicant" 
              placeholder="请输入申请人姓名"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="工单类型">
            <el-select v-model="searchForm.orderType" placeholder="请选择工单类型" clearable style="width: 180px">
              <el-option label="请假申请" value="leave" />
              <el-option label="报销申请" value="reimbursement" />
              <el-option label="设备申请" value="equipment" />
              <el-option label="其他申请" value="other" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 150px">
              <el-option label="待审核" value="pending" />
              <el-option label="已通过" value="approved" />
              <el-option label="已拒绝" value="rejected" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 工单列表 -->
    <div class="order-list-section">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>工单列表</span>
            <div class="header-actions">
              <el-button type="primary" @click="handleBatchApprove" :disabled="!selectedOrders.length">
                <el-icon><Check /></el-icon>
                批量通过
              </el-button>
              <el-button type="danger" @click="handleBatchReject" :disabled="!selectedOrders.length">
                <el-icon><Close /></el-icon>
                批量拒绝
              </el-button>
            </div>
          </div>
        </template>

        <el-table 
          :data="orderList" 
          v-loading="loading"
          @selection-change="handleSelectionChange"
          stripe
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="orderNo" label="工单编号" width="150" />
          <el-table-column prop="title" label="工单标题" min-width="200" />
          <el-table-column prop="applicant" label="申请人" width="120" />
          <el-table-column prop="orderType" label="工单类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getOrderTypeTag(row.orderType)">
                {{ getOrderTypeText(row.orderType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" width="180" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTag(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" width="100">
            <template #default="{ row }">
              <el-tag :type="getPriorityTag(row.priority)" size="small">
                {{ getPriorityText(row.priority) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleView(row)">
                <el-icon><View /></el-icon>
                查看
              </el-button>
              <el-button 
                v-if="row.status === 'pending'" 
                type="success" 
                size="small" 
                @click="handleApprove(row)"
              >
                <el-icon><Check /></el-icon>
                通过
              </el-button>
              <el-button 
                v-if="row.status === 'pending'" 
                type="danger" 
                size="small" 
                @click="handleReject(row)"
              >
                <el-icon><Close /></el-icon>
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 查看工单详情对话框 -->
    <el-dialog 
      v-model="detailDialogVisible" 
      title="工单详情" 
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="currentOrder" class="order-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="工单编号">{{ currentOrder.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="工单标题">{{ currentOrder.title }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentOrder.applicant }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ currentOrder.createTime }}</el-descriptions-item>
          <el-descriptions-item label="工单类型">
            <el-tag :type="getOrderTypeTag(currentOrder.orderType)">
              {{ getOrderTypeText(currentOrder.orderType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="getPriorityTag(currentOrder.priority)">
              {{ getPriorityText(currentOrder.priority) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTag(currentOrder.status)">
              {{ getStatusText(currentOrder.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">{{ currentOrder.description }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentOrder?.status === 'pending'" 
            type="success" 
            @click="handleApprove(currentOrder)"
          >
            通过
          </el-button>
          <el-button 
            v-if="currentOrder?.status === 'pending'" 
            type="danger" 
            @click="handleReject(currentOrder)"
          >
            拒绝
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog 
      v-model="auditDialogVisible" 
      :title="auditType === 'approve' ? '通过审核' : '拒绝审核'" 
      width="500px"
    >
      <el-form :model="auditForm" label-width="80px">
        <el-form-item label="审核意见" required>
          <el-input 
            v-model="auditForm.comment" 
            type="textarea" 
            :rows="4"
            :placeholder="auditType === 'approve' ? '请输入通过意见' : '请输入拒绝原因'"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Document, 
  Search, 
  Refresh, 
  Check, 
  Close, 
  View 
} from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  applicant: '',
  orderType: '',
  status: ''
})

// 分页信息
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

// 数据状态
const loading = ref(false)
const orderList = ref([])
const selectedOrders = ref([])
const detailDialogVisible = ref(false)
const auditDialogVisible = ref(false)
const currentOrder = ref(null)
const auditType = ref('approve')
const auditForm = reactive({
  comment: ''
})

// 模拟数据
const mockOrderList = [
  {
    id: 1,
    orderNo: 'WO202412001',
    title: '请假申请',
    applicant: '张三',
    orderType: 'leave',
    createTime: '2024-12-01 09:30:00',
    status: 'pending',
    priority: 'high',
    description: '因家中有事，需要请假3天'
  },
  {
    id: 2,
    orderNo: 'WO202412002',
    title: '设备申请',
    applicant: '李四',
    orderType: 'equipment',
    createTime: '2024-12-01 10:15:00',
    status: 'approved',
    priority: 'medium',
    description: '申请一台新的笔记本电脑用于开发工作'
  },
  {
    id: 3,
    orderNo: 'WO202412003',
    title: '报销申请',
    applicant: '王五',
    orderType: 'reimbursement',
    createTime: '2024-12-01 11:00:00',
    status: 'rejected',
    priority: 'low',
    description: '出差期间的交通费用报销'
  }
]

// 获取工单列表
const getOrderList = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    orderList.value = mockOrderList
    pagination.total = mockOrderList.length
  } catch (error) {
    ElMessage.error('获取工单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  getOrderList()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    orderNo: '',
    applicant: '',
    orderType: '',
    status: ''
  })
  handleSearch()
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size
  getOrderList()
}

const handleCurrentChange = (current: number) => {
  pagination.current = current
  getOrderList()
}

// 选择处理
const handleSelectionChange = (selection: any[]) => {
  selectedOrders.value = selection
}

// 查看详情
const handleView = (row: any) => {
  currentOrder.value = row
  detailDialogVisible.value = true
}

// 通过审核
const handleApprove = (row: any) => {
  auditType.value = 'approve'
  currentOrder.value = row
  auditForm.comment = ''
  auditDialogVisible.value = true
}

// 拒绝审核
const handleReject = (row: any) => {
  auditType.value = 'reject'
  currentOrder.value = row
  auditForm.comment = ''
  auditDialogVisible.value = true
}

// 批量通过
const handleBatchApprove = () => {
  ElMessageBox.confirm('确定要批量通过选中的工单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('批量通过成功')
    getOrderList()
  })
}

// 批量拒绝
const handleBatchReject = () => {
  ElMessageBox.confirm('确定要批量拒绝选中的工单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('批量拒绝成功')
    getOrderList()
  })
}

// 提交审核
const submitAudit = () => {
  if (!auditForm.comment.trim()) {
    ElMessage.warning('请输入审核意见')
    return
  }
  
  ElMessage.success(auditType.value === 'approve' ? '审核通过成功' : '审核拒绝成功')
  auditDialogVisible.value = false
  getOrderList()
}

// 工具函数
const getOrderTypeTag = (type: string) => {
  const map: Record<string, string> = {
    leave: 'warning',
    reimbursement: 'info',
    equipment: 'success',
    other: 'default'
  }
  return map[type] || 'default'
}

const getOrderTypeText = (type: string) => {
  const map: Record<string, string> = {
    leave: '请假申请',
    reimbursement: '报销申请',
    equipment: '设备申请',
    other: '其他申请'
  }
  return map[type] || '未知'
}

const getStatusTag = (status: string) => {
  const map: Record<string, string> = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return map[status] || 'default'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return map[status] || '未知'
}

const getPriorityTag = (priority: string) => {
  const map: Record<string, string> = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return map[priority] || 'default'
}

const getPriorityText = (priority: string) => {
  const map: Record<string, string> = {
    high: '高',
    medium: '中',
    low: '低'
  }
  return map[priority] || '未知'
}

onMounted(() => {
  getOrderList()
})
</script>

<style scoped lang='less'>
.order-audit-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .page-header {
    margin-bottom: 20px;
    
    .page-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }
    
    .page-desc {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .search-section {
    margin-bottom: 20px;
    
    .search-card {
      border-radius: 8px;
      
      :deep(.el-card__body) {
        padding: 20px;
      }
    }
  }

  .order-list-section {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      
      .header-actions {
        display: flex;
        gap: 12px;
      }
    }
    
    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #ebeef5;
    }
  }

  .order-detail {
    .el-descriptions {
      margin-bottom: 20px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}
</style>